<template>
  <div>
    <div class="banner">
      <el-carousel :interval="4000" type="card" height="160px" trigger="click">
        <el-carousel-item v-for="(item, index) in BannerList" :key="index">
          <a :href="item.url">
            <img :src="item.imageUrl" style="width: 100%; height: 100%" />
          </a>
        </el-carousel-item>
      </el-carousel>
    </div>
    <span class="tilte"
      >推荐歌单<i class="iconfont icon-xiayiyeqianjinchakangengduo"></i
    ></span>
    <div class="recommendList">
      <song-list-item
        v-for="item in recommenList"
        :key="item.id"
        :imgUrl="item.picUrl"
        :label="item.name"
        :playCount="item.playCount"
        :listID="item.id"
      ></song-list-item>
    </div>
    <span class="tilte"
      >最新音乐<i class="iconfont icon-xiayiyeqianjinchakangengduo"></i
    ></span>
    <div class="newMusicList">
      <new-music-item
        v-for="item in newMusicList"
        :key="item.id"
        :picUrl="item.picUrl"
        :musicName="item.name"
        :singer="item.song.artists[0].name"
        :songID="item.id"
      ></new-music-item>
    </div>
    <span class="tilte"
      >推荐MV<i class="iconfont icon-xiayiyeqianjinchakangengduo"></i
    ></span>
    <div class="recommendMVList">
      <mv-item
        v-for="item in recommendMVList.slice(0,3)"
        :key="item.id"
        :imgUrl="item.picUrl"
        :tilte="item.name"
        :authorList="item.artists"
        :playCount="item.playCount"
        :id="item.id"
      ></mv-item>
    </div>
  </div>
</template>

<script>
import { getBannerAPI, recommendListAPI, getNewMusicAPI,rencommendMVAPI} from "@/api/index";
// 引入歌单组件
import SongListItem from "@/components/SongListItem";
// 引入最新歌曲组件
import NewMusicItem from '@/components/NewMusicItem'
// 引入MV组件
import MvItem from '@/components/MVItem'
export default {
  components: {
    SongListItem,
    NewMusicItem,
    MvItem
  },
  data() {
    return {
      BannerList: [],
      recommenList: [],
      newMusicList:[],
      recommendMVList:[]
    };
  },
  methods: {
    //   获取轮播图数据
    async getBanner() {
      getBannerAPI().then(
        res =>{  this.BannerList = res.data.banners;},
        error =>{
          this.errorMsg.innerHTML = "网络请求失败!";
          this.errorMsg.style.display="block"
          setTimeout(() => {
            this.errorMsg.style.display="none"
          }, 1000);
        }
      );
    },
    // 获取推荐歌单
    async getRecommendList() {
      const res = await recommendListAPI({
        limit:10
      });
      this.recommenList = res.data.result;
    },
    // 获取最新音乐
    async getNewMusic() {
      const res = await getNewMusicAPI();
      this.newMusicList = res.data.result;
    },
    // 获取推荐MV
    async rencommendMV() {
      const res = await rencommendMVAPI();
      this.recommendMVList = res.data.result;
    },
  },
  computed:{
    errorMsg(){
      return this.$store.state.scroll.error;
    }
  },
  created() {
    this.getBanner();
    this.getRecommendList();
    this.getNewMusic();
    this.rencommendMV();
  },
};
</script>

<style lang="less" scoped>
.el-carousel-item {
  width: 600px;
}
.banner {
  margin-top: 10px;
  width: 95%;
  margin: 0 auto;
  img {
    border-radius: 10px;
  }
}
.tilte {
  display: block;
  width: 100%;
  margin-left: 20px;
  color: rgb(77, 75, 75);
  font-weight: bold;
  font-size: 22px;
  margin-bottom: 15px;
  margin-top: 15px;
  i {
    font-size: 20px;
    font-weight: lighter;
  }
}
h3:hover {
  color: black;
}
.recommendList {
  width: 95%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.newMusicList {
  width: 95%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  .newMusicItem:hover {
    background-color: rgb(234, 234, 234);
  }
}
.recommendMVList {
  width: 95%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
</style>